{extend name="property/public/insidePageBase" /}
{block name="title"}绑定用户{/block}
{block name="body"}
<div class="layuimini-container">
    <div class="layuimini-main">
        <form class="layui-form" id="submitform">
            <div id="room_table_show"></div>
            <div class="layui-form-item layui-hide">
                <button type="button" class="layui-btn" lay-submit lay-filter="submitBtn" id="submitBtn">提交</button>
            </div>
        </form>
    </div>
</div>
<script id="room_table_tpl" type="text/html">
    <table class="layui-table" lay-size="sm">
        <colgroup>
            <col width="5">
            <col width="250">
            <col>
        </colgroup>
        <thead>
        <tr>
            <th style="padding-left: 20px;">
                <input type="checkbox" lay-filter="checkAll" value="1" lay-skin="primary" />
            </th>
            <th>房间名称</th>
            {{# if(d.plan_type == 2) { }}<th>比例</th>{{# } }}
        </tr>
        </thead>
        <tbody>
        {{# if(d.roomList.length == 0) { }}
        <tr>
            <td colspan="3" align="center">暂无房间</td>
        </tr>
        {{# } else { }}
        {{# layui.each(d.roomList, function(index,item) { }}
        <tr>
            <td style="padding-left: 20px;">
                <input type="checkbox" class="roomCheckbox" name="room[{{index}}][room_id]" value="{{item.id}}" lay-skin="primary" />
            </td>
            <td>{{item.full_room_name}}</td>
            {{# if(d.plan_type == 2) { }}
            <td>
                {{# if(d.is_type == 1) { }}
                    <span>默认平分</span>
                {{# } else { }}
                    <input type="number" name="room[{{index}}][scale]" class="layui-input" placeholder="请输入房间分摊比例" style="height: 25px;" />
                {{# } }}
            </td>
            {{# } }}
        </tr>
        {{# }) }}
        {{# } }}
        </tbody>
    </table>
</script>
{/block}
{block name="js"}
{__block__}
<script>
    layui.use(['form', 'table', 'laytpl'], function () {
        var $ = layui.jquery,form = layui.form,table = layui.table,laytpl = layui.laytpl;
        let plan_type = {$sharedPlanInfo['plan_type']??''};
        let is_type = {$sharedPlanInfo['is_type']??''};
        loadRoomData()
        function loadRoomData(where) {
            $.get('{:url("propertyEnergySharedRoomAdd")}?plan_id={$planId}', where, function(res) {
                var getTpl = room_table_tpl.innerHTML,view = document.getElementById('room_table_show');
                laytpl(getTpl).render({
                    plan_type: plan_type,
                    is_type: is_type,
                    roomList: res.data
                }, function(html){
                    view.innerHTML = html;
                    form.render()
                });
            });
        }
        form.on('checkbox(checkAll)', function(elem) {
            let checked = $(elem.elem).prop('checked');
            let roomCheckboxList = $('.roomCheckbox');
            roomCheckboxList.each(function(index,item) {
                $(item).prop('checked', checked)
            })
            form.render()
        })
        // 监听搜索操作
        form.on('submit(data-search-btn)', function (data) {
            loadRoomData(data.field)
            return false;
        });
    });
</script>
{/block}